<template>
  <div>
    <myheader></myheader>
    <div class="clear"></div>
    <div class="concent" style="width:1200px">
      <!--地址 -->
      <div class="paycont" style="width:1200px">
        <div class="address">
          <h3>确认收货地址 </h3>
          <div class="control">
            <el-button size="mini">地址管理</el-button>
          </div>
          <div class="clear"></div>
          <ul>
            <li v-for="(addr, index) in addressList" :key="index" class="user-addresslist" :class="checkedAddr(addr.id)" style="width:250px;border:1px solid rgb(229,229,229;margin:0px;margin-bottom:5px" v-on:click="checkAddr = addr">
              <span class="fr am-badge am-badge-danger" v-if="addr.status==1" style="font-size:0.8em">默认地址</span>
              <p class="new-tit new-p-re">
                <span class="new-txt">{{addr.name}}:</span>
                <span class="new-txt-rd2">{{addr.phone}}</span>
              </p>
              <div class="new-mu_l2a new-p-re" style="padding:0px">
                <p class="new-mu_l2cw">
                  <span class="title">地址：</span>
                  <span class="province">{{addr.province}}</span>
                  <span class="city">{{addr.city}}</span>
                  <span class="dist">{{addr.county}}</span>
                  <span class="street">{{addr.details}}</span></p>
              </div>
            </li>
          </ul>

          <div class="clear"></div>
        </div>
        <!--物流 -->
        <div class="logistics">
          <h3>选择交易方式</h3>
          <ul class="pay-list">
            <li class="pay card">
              <el-radio v-model="transType" label="1" >邮寄</el-radio>
            </li>
            <li class="pay card">
              <el-radio v-model="transType" label="2" >面交</el-radio>
            </li>
            <li class="pay card">
              <el-radio v-model="transType" label="3" >自提</el-radio>
            </li>
          </ul>
        </div>
        <div class="clear"></div>

        <!--支付方式-->
        <div class="logistics">
          <h3>选择支付方式</h3>
          <ul class="pay-list">
            <li class="pay card" v-if="transType!=1">
              <el-radio v-model="payType" label="1">线下支付</el-radio>
            </li>
            <li class="pay card">
              <el-radio v-model="payType" label="2">支付宝</el-radio>
            </li>
            <!-- <li class="pay card">
              <el-radio v-model="payType" label="3">微信</el-radio>
            </li> -->
          </ul>
        </div>
        <div class="clear"></div>

        <!--订单 -->
        <div class="concent">
          <div id="payTable">
            <h3>确认订单信息</h3>
            <div class="cart-table-th">
              <div class="wp">

                <div class="th th-item">
                  <div class="td-inner" style="text-align:left">商品信息</div>
                </div>
                <div class="th th-price">
                  <div class="td-inner">单价</div>
                </div>
                <div class="th th-amount">
                  <div class="td-inner">数量</div>
                </div>
                <div class="th th-sum">
                  <div class="td-inner">金额</div>
                </div>
                <div class="th th-oplist">
                  <div class="td-inner">配送方式</div>
                </div>

              </div>
            </div>
            <div class="clear"></div>

            <div class="item-list" style="margin-top:20px;border-bottom:1px solid" v-for="order in orderList">
              <div style="width:100%;height:30px;padding:0 10px">
                <em class="font-weight: bold;">卖家：</em><em>{{order.mchtName}}</em>
              </div>
              <div class="bundle-main" v-for="orderItem in order.orderDetails">
                <ul class="item-content clearfix">
                  <div class="pay-phone" v-on:click="toItem(orderItem.itemId)">
                    <li class="td td-item" style="width:50%">
                      <div class="item-pic" style="width:80px;height:80px">
                        <a href="javascript:;;" class="J_MakePoint">
                          <img v-bind:src="orderItem.mainImg" class="itempic J_ItemImg" style="width:80px"></a>
                      </div>
                      <div class="item-info" style="width:100%">
                        <div class="item-basic-info" style="width:100%">
                          <a href="javascript:;;" class="item-title J_MakePoint" data-point="tbcart.8.11">{{orderItem.itemName}}</a>
                        </div>
                      </div>
                    </li>
                    <li class="td td-price">
                      <em class="J_Price price-now">{{orderItem.transPrice}}</em>
                    </li>
                  </div>
                  <li class="td td-amount" style="margin-top:20px">
                    <div class="amount-wrapper">
                      <em class="J_Price price-now">{{orderItem.buyNum}}</em>
                    </div>
                  </li>
                  <li class="td td-sum">
                    <div class="td-inner">
                      <em tabindex="0" class="J_ItemSum number">{{orderItem.orderPrice}}</em>
                    </div>
                  </li>
                  <li class="td td-oplist">
                    <div class="td-inner">
                      <span class="phone-title">配送方式</span>
                      <div class="pay-logis" v-if="transType==1">
                        快递<b class="sys_item_freprice">{{orderItem.postage}}</b>元
                      </div>
                      <div class="pay-logis" v-else>
                        无
                      </div>
                    </div>
                  </li>

                </ul>
                <div class="clear"></div>
              </div>

              <div class="order-comment" style="padding:0 10px">
                <div class="order-user-info">
                  <div id="holyshit257" class="memo">
                    <label>备注：</label>
                    <el-input v-model="order.comment" placeholder="请输入内容"></el-input>
                    <div class="msg hidden J-msg">
                      <p class="error">最多输入500个字符</p>
                    </div>
                  </div>
                </div>
              </div>

              <div class="buy-point-discharge ">
                <p class="price g_price ">
                  合计（含运费） <span>¥</span>
                  <em class="pay-sum" v-text="order.transPrice+order.postage" v-if="transType==1"></em>
                  <em class="pay-sum" v-text="order.transPrice" v-else></em>
                </p>
              </div>
            </div>
            <!-- orders -->

            <div class="clear"></div>
          </div>
        </div>

        <div class="clear"></div>
        <!--含运费小计 -->
        <!-- <div class="buy-point-discharge ">
          <p class="price g_price ">
            合计（含运费） <span>¥</span>
            <em class="pay-sum" v-if="transType==1" v-text="allPrice+allPostage"></em>
            <em class="pay-sum" v-else>{{allPrice}}</em>
          </p>
        </div> -->

        <!--信息 -->
        <div class="order-go clearfix">
          <em>确认信息</em>
          <div class="pay-confirm clearfix">
            <div style="width:50%;float:right;border:2px solid rgb(255,68,0);padding:10px">
              <div tabindex="0" id="holyshit267" class="realPay"><em class="t">实付款：</em>
                <span class="price g_price ">
                  <span>¥</span>
                  <em class="style-large-bold-red " id="J_ActualFee" v-if="transType==1" v-text="allPrice+allPostage"></em>
                  <em class="style-large-bold-red " id="J_ActualFee" v-else v-text="allPrice"></em>
                </span>
              </div>

              <div id="holyshit268" class="pay-address">
                <p class="buy-footer-address">
                  <span class="buy-line-title">交易方式：</span>
                  <span v-text="formatterTransType()">

                  </span>
                </p>
                <p class="buy-footer-address">
                  <span class="buy-line-title">收货地址：</span>
                  <span>
                    <span class="province">{{checkAddr.province}}</span>
                    <span class="city">{{checkAddr.city}}</span>
                    <span class="dist">{{checkAddr.county}}</span>
                    <span class="street">{{checkAddr.details}}</span>
                  </span>
                </p>
                <p class="buy-footer-address">
                  <span class="buy-line-title">收货人：</span>
                  <span class="buy-address-detail">
                    <span class="buy-user">{{checkAddr.name}} </span>
                    <span class="buy-phone">{{checkAddr.phone}}</span>
                  </span>
                </p>
              </div>
            </div>
            <div class="pay-total">
              <!--优惠券 -->
              <!-- <div class="buy-agio">
                <li class="td td-bonus">
                  <el-switch v-model="integral" active-color="#13ce66" inactive-color="#ff4949" @change="integralChange()">
                  </el-switch>
                  <span class="bonus-title">使用积分抵扣</span>
                  剩余积分<em class="mr-10">500</em>可抵扣<em>（5元）</em>
                </li>

              </div> -->
              <div class="clear"></div>
            </div>

            <div id="holyshit269" class="submitOrder" v-on:click="saveOrder()">
              <div class="go-btn-wrap">
                <a id="J_Go" href="javascript:;;" class="btn-go" tabindex="0" title="点击此按钮，提交订单">提交订单</a>
              </div>
            </div>
            <div class="clear"></div>
          </div>
        </div>
      </div>

      <div class="clear"></div>
    </div>

    <div class="footer">
      <div class="footer-hd">
        <p>
          <a href="#">恒望科技</a>
          <b>|</b>
          <a href="#">商城首页</a>
          <b>|</b>
          <a href="#">支付宝</a>
          <b>|</b>
          <a href="#">物流</a>
        </p>
      </div>
      <div class="footer-bd">
        <p>
          <a href="#">关于恒望</a>
          <a href="#">合作伙伴</a>
          <a href="#">联系我们</a>
          <a href="#">网站地图</a>
          <em>© 2015-2025 Hengwang.com 版权所有</em>
        </p>
      </div>
    </div>
    <div class="clear"></div>
    <navfull></navfull>
  </div>
</template>
<script>
import myheader from '@/components/myheader.vue'
import navfull from '@/components/navfull.vue'
import navtable from '@/components/navtable.vue'
import leftmenu from '@/components/leftmenu.vue'
export default {
  name: 'orderconfirm',
  data () {
    return {
      transType: "",
      payType: "",
      addressList: [],
      checkAddr: {},
      orderList: [],
      allPrice: 0,
      allPostage: 0,
      integral: false
    }
  },
  mounted () {
    this.qryOrders();
    this.initAddress();
  },
  components: {
    myheader,
    navfull,
    navtable,
    leftmenu
  },
  methods: {
    formatterTransType () {
      switch (this.transType) {
        case 1:
          return "邮寄";
        case 2:
          return "面交";
        case 3:
          return "自提";
        default:
          return "未选择";
      }
    },
    integralChange () {
      if (this.integral) {
        this.allPrice -= 5;
      } else {
        this.allPrice += 5;
      }
    },
    initAddress () {
      this.axios.get("/user/address/addressList")
        .then((response) => {
          var data = response.data.data;
          this.addressList = data;
          if (data.length > 0) {
            this.checkAddr = data[0];
          }
        })
    },
    checkedAddr (addrId) {
      if (addrId == this.checkAddr.id)
        return "defaultAddr"
      else
        return ""
    },
    qryOrders () {
      var orderId = this.$route.query.orderId;
      var orderIds = orderId.split("&&");
      this.axios.get("/trade/order/orders", {
        params: {
          orderIds: orderIds
        }
      }).then((res) => {
        var result = res.data;
        if (result.code == 200) {
          this.orderList = result.data;
          for (var i in this.orderList) {
            this.allPrice += this.orderList[i].transPrice;
            this.allPostage += this.orderList[i].postage;
          }
        }
      })
    },
    toItem (itemId) {
      this.$router.push({
        name: "item",
        query: {
          itemId: itemId
        }
      })
    },
    saveOrder () {
      if (this.transType == 0 || this.payType == 0) {
        this.$layer.msg("请选择支付方式和交易方式");
        return;
      }
      var saveOrder = {};

      var orders = this.orderList;
      for (var i in orders) {
        var order = orders[i];
        order.payType = this.payType;
        order.tradeType = this.transType;
        order.addressId = this.checkAddr.id;
      }
      saveOrder.orders = orders;
      this.axios.post("/trade/order/save", saveOrder, {
        params: {
          integral: this.integral
        }
      }).then((res) => {
        var result = res.data;
        if (result.code == 200) {
            this.$router.push({
              name:'confirm',
              query:{
                orderId:this.$route.query.orderId
              }
            })
        } else {
          this.$confirm(result.msg, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$router.push({
              name:'order'
            })
          }).catch(() => {
          });
        }
      })
    }
  }
}
</script>

<style scoped>
@import "../../AmazeUI-2.4.2/assets/css/admin.css";
@import "../../AmazeUI-2.4.2/assets/css/amazeui.css";
@import "../../assets/basic/css/demo.css";
@import "../../assets/css/cartstyle.css";
@import "../../assets/css/jsstyle.css";
@import "../../assets/css/common/commonStyle.css";
</style>
